<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('jNPTskZpp1ULQksR7sNGP')}}</p>
      <div class="wrap-operate-container">
        <div class="wrap-operate-area">
          <div class="operate-select-item">
            <label class="title">{{$t('SWJNpRnfSDK7MAg0omTmr')}}:</label>
            <div class="content">
              <Select
                v-model="stationName"
                style="width: 200px"
                @on-change="changeStationName"
              >
                <Option
                  v-for="item in stations"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-select-item">
            <label class="title">{{$t('dUE9V6jUHBdS6m9avfiqp')}}:</label>
            <div class="content">
              <Select
                v-model="pileName"
                style="width: 200px"
                @on-change="changePileName"
              >
                <Option
                  v-for="item in allPiles"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-select-item">
            <label class="title">{{$t('lkhWiUbbGA-yaKpvmgykA')}}：</label>
            <div class="content">
              <Select
                v-model="dealType"
                style="width: 200px"
                @on-change="changePileName"
              >
                <Option
                  v-for="item in dealTypes"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>

          <div class="operate-timepicker-item">
            <label class="title">{{$t('HMF_Lpm9c2VDS6gztsqg8')}}:</label>
            <div class="content">
              <DatePicker
                v-model="timescope"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('4yP5zHObfE9vFzhk3a6yk')"
                style="width: 300px"
              ></DatePicker>
            </div>
          </div>
          <div class="operate-btn-item">
            <Button class="item" type="info" icon="ios-search" @click="query"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
            <Button class="item" type="info" icon="ios-search" @click="operate"
              >{{$t('Ty1ns2epHIaihi82jwUfc')}}</Button
            >
            <Button
              class="item"
              type="info"
              icon="ios-card"
              @click="exportExcel"
              >{{$t('ssHl1qTS2oMuNp3RZnkQY')}}</Button
            >
          </div>
        </div>
      </div>
      <Table :loading="loading" :columns="columns" :data="data"></Table>
    </Card>
  </div>
</template>

<script>
import moment from 'moment'
import { getStationInfo } from '@/api/data2'
export default {
  name: 'error_history',
  data () {
    return {
      stationName: '',
      stations: [],
      pileName: '',
      allPiles: [],
      dealType: '',
      dealTypes: [
        {
          name: this.$t('6MfsPuSbxw18YZNkxERzd'),
          id: 0
        },
        {
          name: this.$t('fS8WUrbeyLeYTSMcvGSTm'),
          id: 1
        }
      ],
      loading: false,
      totalPayMoney: '0.00',
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('NNqwsiYKNFh8WR5Mvlwed'),
          key: 'stationName'
        },
        {
          title: this.$t('dUE9V6jUHBdS6m9avfiqp'),
          key: 'pileName'
        },
        {
          title: this.$t('HMF_Lpm9c2VDS6gztsqg8'),
          key: 'exceptionUploadTime'
        },
        {
          title: this.$t('dqVfnqaTnS_Rlah5FEjB0'),
          key: 'exceptionDetail'
        },
        {
          title: this.$t('lkhWiUbbGA-yaKpvmgykA'),
          key: 'isDeal'
        },
        {
          title: this.$t('SUyVxsYLl-y_k7zZh1dvt'),
          key: 'superAdmin'
        },
        {
          title: this.$t('E1-bu4gl8U7g1VkPoydv0'),
          key: 'showChargePileStatus'
        }
      ],
      data: [],
      timescope: [moment(0, 'HH').toDate(), moment().toDate()]
    }
  },
  mounted () {},
  methods: {
    changeStationName () {},
    changePileName () {},
    query () {},
    exportExcel () {},
    operate () {}
  }
}
</script>

<style></style>
